<template>
  <div class="login-bg">
    <mt-field label="用户名" v-model="username" placeholder="请输入用户名" @keyup.native.enter="toLogin"></mt-field>
    <mt-field label="密码" v-model="password" placeholder="请输入密码" type="password" @keyup.native.enter="toLogin"></mt-field>
    <mt-button type="primary" @click.native="toLogin">登录</mt-button>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'

  export default {
    name: 'Login',
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      toLogin () {
        let redirect = this.$route.query.redirect
        let params = new URLSearchParams()
        if (this.username === '') {
          Toast('用户名不能为空')
          return false
        }
        if (this.password === '') {
          Toast('密码不能为空')
          return false
        }
        params.append('username', this.username)
        params.append('password', this.password)
        this.$post('/api/user/login/user_login', params).then((res) => {
          Toast('登录成功')
          setTimeout(() => {
            if (redirect === undefined) {
              this.$router.push({path: 'entry'})
            } else {
              this.$router.push({path: redirect})
            }
          }, 2000)
        })
      }
    }
  }
</script>

<style lang="less">
  .login-bg {
    height: 100vh;
    background-color: #FFF;
    .mint-button {
      margin: 0 12px;
      width: 90%;
    }
  }
</style>